// 导入three.js
import * as THREE from "three";
// 导入轨道控制器
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
// 导入GUI
import { GUI } from "three/examples/jsm/libs/lil-gui.module.min.js"
// 导入hdr加载器
import { RGBELoader } from "three/examples/jsm/loaders/RGBELoader.js"
// 导入gltf加载器
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js"
// 导入draco解码器
import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader.js"
// 导入补间动画tween库
import * as TWEEN from "three/examples/jsm/libs/tween.module.js"

// 创建场景
const scene = new THREE.Scene()
// scene.background = new THREE.Color("#c6c6c6")
// 创建相机
const camera = new THREE.PerspectiveCamera(
  45, // 视角
  window.innerWidth / window.innerHeight, //宽高比
  0.1, // 近平面
  1000 // 远平面
)

// 创建渲染器
const renderer = new THREE.WebGLRenderer()
renderer.setSize(window.innerWidth, window.innerHeight) // 设置渲染器宽高
document.body.appendChild(renderer.domElement) // 将渲染器添加到body中

// 创建轨道控制器
const controls = new OrbitControls(camera, renderer.domElement)
controls.enableDamping = true // 开启阻尼
controls.dampingFactor = 0.05 // 阻尼系数

// 设置相机位置
camera.position.z = 15
camera.position.y = 4
camera.position.x = 2
camera.lookAt(0, 0, 0)

// 添加世界辅助坐标器
const axisHelper = new THREE.AxesHelper(5)
scene.add(axisHelper)

function init() {
  controls.update() // 更新控制器
  requestAnimationFrame(init);
  renderer.render(scene, camera) // 渲染场景和相机
  // 更新tween
  TWEEN.update()
}

init() //初始化
// 创建GUI
const gui = new GUI()

// 创建三个球
const sphere1 = new THREE.Mesh(
  new THREE.SphereGeometry(1, 32, 32),
  new THREE.MeshBasicMaterial({ color: "#00affa" })
)
sphere1.position.x = -4
scene.add(sphere1)

// 创建一个补间动画
const tweenX = new TWEEN.Tween(sphere1.position)
.to({ x: 4 }, 2 * 1024)
// .onUpdate(e => console.log(sphere1.position.x))
// .yoyo(true) // 循环往复
// .repeat(Infinity) // 循环无数次
// .repeat(2) // 循环两次
// .delay(3*1024) // 延迟3秒
.easing(TWEEN.Easing.Quadratic.InOut) // 设置缓动函数
.start() // 启动补间动画

const tween2 = new TWEEN.Tween(sphere1.position)
.to({ x: -4 }, 2 * 1024)
.easing(TWEEN.Easing.Quadratic.InOut) // 设置缓动函数
.chain(tweenX)

tweenX.chain(tween2)
.onStart(() => {
  console.log("开始")
}) // 开始时触发
.onUpdate(() => {
  console.log(sphere1.position.x)
}) // 更新时触发
.onComplete(() => {
  console.log("结束")
}) // 结束时触发
.onStop(() => {
  console.log("停止") // 停止时触发
})

const params = {
  start:()=>{
    tweenX.start()
  },
  stop:()=>{
    tweenX.stop()
  }
}
gui.add(params,"start").name("开始")
gui.add(params,"stop").name("停止")